﻿
@{
    Layout = null;
}
<style>
    html, body {
        padding: 0;
        margin: 0;
        border: none;
        width: 100%;
        height: 100%;
    }

    .chat-container {
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        padding: 0;
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .chat-title {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 20px;
        line-height: 50px;
        background-color: black;
        color: white;
        margin-top: 0;
        text-indent: 20px;
    }
        .chat-title span {
            font-size: 20px;
            line-height: 50px;
            margin-right:20px;
        }

    .chat-content {
        flex: 1;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .navbar-bottom {
        height: 60px;
        width: 100%;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: space-around;
        border-top: 1px solid gray;
    }



    .nav-container {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-around;
    }

        .nav-container .icon {
            width: 35px;
            height: 30px;
            background-size: cover;
        }

        .nav-container .nav-desc {
            font-size:10px;
            line-height:10px;
            color:gray;
            text-align:center;
        }


        .nav1 .icon {
            background-image: url("../../Static/Icon/home_normal.png");
        }

           .nav1.select .icon {
                background-image: url("../../Static/Icon/home_selected.png");
            }

    .nav2 .icon {
        background-image: url(../../Static/Icon/category_normal.png);
        background-size: cover;
    }

    .nav2.select .icon {
        background-image: url(../../Static/Icon/category_selected.png);
    }

         .nav3 .icon {
            background-image: url(../../Static/Icon/find_normal.png);
        }

    .nav3.select .icon {
        background-image: url(../../Static/Icon/find_selected.png);
    }

        .nav4 .icon {
            background-image: url(../../Static/Icon/mine_normal.png);
        }

    .nav4.select .icon {
        background-image: url(../../Static/Icon/mine_selected.png);
    }

    .dialog-item {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: space-between;
        /* align-items: center;*/
        padding: 5px 20px;
        width: 100%;
        border-bottom: 1px solid #e2e2e2;
    }

        .dialog-item:hover {
            background-color: #e1e1e1;
        }

    .dialog-item-actavter {
        margin: 0;
        padding: 0 0 1px 1px;
        width: 60px;
        height: 60px;
        border-radius: 2px;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap-reverse;
        background-color: #e1e1e1;
    }
    .group-actavter {
        width: 18px;
        height: 18px;
        margin:1px 1px 0px 0px;
        background-size: cover;
    }

        .group-actavter.a {
            background-image: url(http://thirdwx.qlogo.cn/mmopen/wzJhLVPsrd0oz5tkDMWkceUOw9PYibjoeDADia3vNKRIhIs2aQgm5soQ0v9o0NBDJY0s0bVoaSRWH9ZvDWsXJOZ47ibEDzibq4p1/132);
        }

        .group-actavter.b {
            background-image: url(http://wx.qlogo.cn/mmopen/wzJhLVPsrd0pxaqjbU0T0OjTaX6QRVs6Nh0iaJho5bm4SYWtGV2JR2vI2sJakWibE8EAB6eE7iar1WILyOnfibcBaNyfiahOkHQu4/132);
        }

        .group-actavter.c {
            background-image: url(http://wx.qlogo.cn/mmopen/QTYTxpdzxkK8RXAncRm7enJktm8saTPJsFnPnyGIm0Rr8fTDjibLjvet5F2NoutBTJAredCfEacGDH3nfNyOShy6PuFnRbH0e/132);
        }

        .group-actavter.d {
            background-image: url(http://thirdwx.qlogo.cn/mmopen/ovYSTtrzQ7IsTsvhCg9qdvPWAKqcBsib0Y0ibboEvpzWMwhtHG8oJP5cMQ5CYmicxfJKK9nTQ0zE4ibJ53vVOEy20N75m9u4RWXT/132);
        }

        .group-actavter.e {
            background-image: url(http://wx.qlogo.cn/mmopen/Q3auHgzwzM6fDTHqibftmzWiavmhdxL744j21n4pvAmTJabXcGon5v52gWteQic17X3uMejh5eT6Kj7s47R4jTTKw/132);
        }

        .group-actavter.f {
            background-image: url(http://thirdwx.qlogo.cn/mmopen/jUZSR7qP2w0dUpy73zrpCpl8JkE52ACepF68hEC8S3PhpQU3n4gCianLh8BWCf0otUI4kIpAT1sBiano9QPnHrzVOCibg3sPYwt/132);
        }

        .group-actavter.g {
            background-image: url(http://thirdwx.qlogo.cn/mmopen/ibKHP1TZZeXII9CLr5ZRXr5ctaHdE02WpNhjAqfg5Yicia5EFzzhicaTmWSI74flcJDVQCk7pqLbUGhCicNI8EicVxicUQxkH7nZtNT/132);
        }

        .group-actavter.h {
            background-image: url(http://thirdwx.qlogo.cn/mmopen/Q3auHgzwzM54O4VO8Uiaue1HVHW4xH8vZwoQYgJGdwph4pyZiaEJOR6sOffyiaF88bNDw01Z2iaYthpx4MnfqFQGEA/132);
        }

        .group-actavter.i {
            background-image: url(http://thirdwx.qlogo.cn/mmopen/ovYSTtrzQ7L91QRxo85AMnKXARiasWo3hnr09SCWLtD6g0ZMaL3g5icxFicQjOd6K1cTNwWo2V6DbxyWuNljEE1Rj4bcNXoKG44/132);
        }

        .dialog-item-content-container {
            padding: 0px 10px;
            flex: 1;
        }
    
        .dialog-item-name{
            font-size:20px;
            line-height:30px;
    }

    .dialog-item-date,.dialog-item-lastTalkContent {
        color: #999;
    }

    .dialog-item-date{
        font-size:10px;
    }
</style>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Home</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" />
</head>
<body>
    <div class="chat-container">
      <div class="chat-title"><label>微信</label><div><span class="glyphicon glyphicon-search"></span><span class="glyphicon glyphicon-plus"></span></div></div>
      <div class="chat-content">
          <div class="dialog-item" id="group1" >
              <div class="dialog-item-actavter">
                  <div class="group-actavter a"></div>
                  <div class="group-actavter b"></div>
                  <div class="group-actavter c"></div>
                  <div class="group-actavter d"></div>
                  <div class="group-actavter e"></div>
                  <div class="group-actavter f"></div>
                  <div class="group-actavter g"></div>
                  <div class="group-actavter h"></div>
                  <div class="group-actavter i"></div>
              </div>
              <div class="dialog-item-content-container">
                  <div class="dialog-item-name">群聊</div>
                  <div class="dialog-item-lastTalkContent">这是最后一条群聊信息...</div>
              </div>
              <div class="dialog-item-date">上午11点</div>
          </div>
     
      </div>
      <div class="navbar-bottom">
          <div class="nav-container nav1 select">
          <div class="icon"></div>
          <div class="nav-desc">微信</div>
          </div>
          <div class="nav-container nav2">
              <div class="icon"></div>
              <div class="nav-desc">通讯录</div>
          </div>
          <div class="nav-container nav3">
              <div class="icon"></div>
              <div class="nav-desc">发现</div>
          </div>
          <div class="nav-container nav4">
              <div class="icon"></div>
              <div class="nav-desc">我</div>
          </div>
      </div>
    </div>
    <script>
        $(function () {
            $("#group1").click(function () {
                window.location.href = '@Href("~/FlexShow/chat?groupid=1")&userId=@Request["userId"]#lastrecord';
            })
        });
    </script>
</body>
</html>
